﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>PKCS#10 complex example</title>

    <script type="application/javascript" src="../../node_modules/babel-polyfill/dist/polyfill.js"></script>
    <script type="text/javascript" src="bundle.js"></script>

    <style type="text/css">
        body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;}
        .wrapper{
            width:600px;
            margin:50px auto;
            padding:50px;
            border:solid 2px #CCC;
            border-radius:10px;
            -webkit-border-radius:10px;
            box-shadow:0 0 12px 3px #CDCDCD;
            -webkit-box-shadow:0 0 12px 3px #CDCDCD;
            background:#FFF;
        }
        #add-pkcs10-block label{
            display:block;
            font:bold 18px/22px Helvetica, Arial, sans-serif;
            margin:0 0 8px;
        }
        #pem-text-block{
            width:500px;
            border:solid 1px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            height:340px;
            font:normal 12px/15px monospace;
            display:block;
            margin:0 0 12px;
            box-shadow:0 0 5px 5px #EFEFEF inset;
            -webkit-box-shadow:0 0 5px 5px #EFEFEF inset;
            padding:20px;
        }
        #add-pkcs10-block a{
            display:inline-block;
            padding:5px 15px;
            background:#ACD0EC;
            border:solid 1px #4C6181;
            color:#000;
            font:normal 14px/16px Helvetica, Arial, sans-serif;
        }
        #add-pkcs10-block a:hover{
            background:#DAEBF8;
            cursor:pointer;
        }
        #pkcs10-data-block{
            display:none;
            border:solid 2px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            margin:50px 0 0;
            padding:20px 30px;
            background:#F0F4FF;
        }
        #pkcs10-data-block h2{
            margin:0 0 16px;
            font:bold 22px/24px Helvetica, Arial, sans-serif;
        }
        #pkcs10-data-block p{
            margin:0 0 12px;
        }
        #pkcs10-data-block p .type{
            font-weight:bold;
            display:inline-block;
            width:176px;
        }
        #pkcs10-data-block .two-col{
            overflow:hidden;
            margin:0 0 16px;
        }
        #pkcs10-data-block .two-col .subject{
            width:180px;
            font-weight:bold;
            margin:0 0 12px;
            float:left;
        }
        #pkcs10-data-block .two-col #pkcs10-subject{
            margin:0;
            padding:0;
            float:left;
            list-style:none;
        }
        #pkcs10-data-block .two-col #pkcs10-subject li p{
            margin:0;
        }
        #pkcs10-data-block .two-col #pkcs10-subject li p span{
            width:40px;
            display:inline-block;
            margin:0 0 5px;
        }
        #pkcs10-data-block .two-col #pkcs10-exten{
            overflow:hidden;
            padding:0 0 0 17px;
            margin:0;
            list-style-type:square;
        }
        textarea {
           resize: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="add-pkcs10-block">
            <p>
                <label for="hashAlg" style="font-weight:bold">Hashing algorithm:</label>
                <select id="hashAlg" onchange="handleHashAlgOnChange()">
                    <option value="alg_SHA1">SHA-1</option>
                    <option value="alg_SHA256">SHA-256</option>
                    <option value="alg_SHA384">SHA-384</option>
                    <option value="alg_SHA512">SHA-512</option>
                </select>
            </p>
            <p>
                <label for="signAlg" style="font-weight:bold">Signature algorithm:</label>
                <select id="signAlg" onchange="handleSignAlgOnChange()">
                    <option value="alg_RSA15">RSASSA-PKCS1-v1_5</option>
                    <option value="alg_RSA2">RSA-PSS</option>
                    <option value="alg_ECDSA">ECDSA</option>
                </select>
            </p>
            <label for="pem-text-block" style="font-weight:bold">Paste in PKCS#10:</label>
            <textarea id="pem-text-block"></textarea>
            <a onclick="createPKCS10();">Create</a>
            <a onclick="parsePKCS10();">Parse</a>
            <a onclick="verifyPKCS10();">Verify</a>
        </div>
        <div id="pkcs10-data-block" style="display:none;">
            <h2 id="pkcs10-subject-cn"></h2>
            <div class="two-col">
                <p class="subject">Subject:</p>
                <ul id="pkcs10-subject"></ul>
            </div>
            <p><span class="type">Public Key Size (Bits):</span> <span id="keysize">key size</span></p>
            <p><span class="type">Signature Algorithm:</span> <span id="sig-algo">signature algorithm</span></p>
            <div id="pkcs10-attributes" class="two-col" style="display:none;">
                <p class="subject">Attributes:</p>
                <ul id="pkcs10-exten"></ul>
            </div>
        </div>
    </div>
</body>
</html>